<template>
  <div class="form-btn el-form-item">
    <div v-if="!showBtn" class="form-btn-wrap">
      <el-button type="primary" class="mg-r-6 search-btn" @click="getSearchFor" :loading="loading">搜索</el-button>
      <el-button @click="reset" class="mg-r-6">重置</el-button>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    showReset: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    reset() {
      this.$emit('reset')
    },
    getSearchFor() {
      this.$emit('getSearchFor')
    }
  }
}
</script>

<style scoped lang="scss">
.form-btn {
  width: 238px;
  &.el-form-item {
    margin-right: 4px;
    margin-bottom: 0;
    padding-left: 10px;
  }
  &.mg-b-10 {
    margin-bottom: 10px;
  }
  &.big-width {
    width: 190px;
  }
  &.btn-bottom {
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 0;
  }
  .form-btn-wrap {
    display: flex;
    .el-button {
      &.search-btn {
        white-space: nowrap;
        border: 1px solid #03A98E;
        padding: 7px 10px;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        font-weight: 500;
        font-size: 14px;
        border-radius: 4px;
        display: inline-block;
        background-color: #03A98E;
        border-color: #03A98E;
        color: #fff;
        // &:hover,
        // &:focus {
        //   background: $menuActiveText;
        //   color: $white;
        //   border-color: $menuActiveText;
        // }
        &.fill-height {
          padding: 8px 10px;
        }
      }
      &.search-btn:hover {
        background-color: rgba(3,169,142, .8);
        border-color: rgba(3,169,142, .8);
      }
    }
  }
}
</style>